import constConfig from '../constant'
import { ReactVideo } from '../react-video'
import { stringifyUrl } from '@c/video/utils'
import styles from './index.module.scss'
import Button from '@c/button'
import cm from 'classnames'
import { useVipDialog, useShowLogin } from '@/utils/hooks'
import { openPayModalReport } from '@/utils/report'
import { useRecoilValue } from 'recoil'
import { userInfo } from '@/store'

const Index = props => {
  const user = useRecoilValue(userInfo)
  const showVipDialog = useVipDialog()
  const showLogin = useShowLogin()

  const toVip = () => {
    if (user?.email && user.token) {
      openPayModalReport({
        isLogin: 'true',
        user_type: user?.isVip ? '会员' : '非会员'
      })
      showVipDialog(1)
    } else {
      showLogin()
    }
  }

  return (
    <div style={constConfig.style} className={styles.sport}>
      {user?.isVip && (
        <ReactVideo
          {...props}
          playType="FLV"
          style={constConfig.style}
          hideProgress
          hideSpeed
          hideNext
          hideJuji
        />
      )}
      {typeof user.isVip !== 'undefined' && !user.isVip && (
        <div className={styles.notVip}>
          <p className={styles.getVipText}>赛事直播是会员专享内容，请开通VIP后观看</p>
          <Button className={styles.getVip} onClick={toVip}>
            <span className="hideWhenPhone">VIP畅享全部精彩{'>>'}</span>
            <span className="hideWhenPc">开通VIP</span>
          </Button>
          <img src="/images/sport-vip.webp" alt="开通VIP" className={cm(styles.getVipImg, 'hideWhenPhone')} />
        </div>
      )}
      {typeof user.token !== 'undefined' && !user.token && (
        <div className={styles.notVip}>
          <p className={styles.getVipText}>注册免费看赛事直播~</p>
          <Button className={cm(styles.getVip, styles.getLogin)} onClick={toVip}>
            <span>立即注册</span>
          </Button>
        </div>
      )}
    </div>
  )
}
export default Index
